<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/vCloak.css" />
	</head>
	<style type="text/css">
		* {
			color: #333;
		}
		
		body {
			background: #F3F3EF;
		}
		
		.main {
			padding: 8px 12px;
		}
		
		#pullrefresh {
			background: #F3F3EF;
		}
		
		.message {
			display: flex;
			background: #fff;
			padding: 10px 14px;
			border-radius: 4px;
			height: 90px;
			margin-bottom: 8px;
		}
		
		.message:last-child {
			margin: 0;
		}
		
		.data {
			flex: 1;
		}
		
		.msg_img {
			margin-right: 8px;
			height: 100%;
		}
		
		.msg_img>img {
			height: 100%;
		}
		
		.data_title {
			font-size: 14px;
		}
		
		.release,
		.deadline {
			font-size: 12px;
			color: #B2B2B2;
		}
		
		.goread {
			margin: 22px 0;
			font-size: 14px;
			border: 1px solid #21B0FD;
			color: #21B0FD;
			border-radius: 50px;
			padding: 0 6px;
			width: 60px;
			text-align: center;
		}
		
		.release_name {
			color: #40CC8B;
		}
		
		.data_title,
		.release {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			width: 100%;
		}
		
		.see {
			margin: 22px 0;
			font-size: 14px;
			border: 1px solid #34D498;
			color: #34D498;
			border-radius: 50px;
			padding: 0 6px;
			width: 60px;
			text-align: center;
		}
		
		.empty {
			width: 100%;
			border: 0;
			display: none;
		}
	</style>

	<body style="display: none;">
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<div class="main">
					<div class="message" v-for="list in list" :caseUid="list.caseUid" :planCaseUid="list.planCaseUid" :readingRecordUid="list.readingRecordUid">
						<div class="msg_img"><img :src="list.casePrcUrl" /></div>
						<div class="data">
							<div class="data_title"><span v-cloak>{{list.caseName}}</span></div>
							<div class="deadline">截止:<span v-cloak>{{list.endDate}}</span></div>
							<div class="release">发布者:<span class="release_name" v-cloak>{{list.createTeacher}}</span></div>
						</div>
						<div class="msg_btn">

							<div class="see" v-if="list.isPublic" v-cloak>查看</div>
							<div class="goread" v-else v-cloak>去朗读</div>
						</div>
					</div>

					<!--<div class="message">
						<div class="msg_img"><img src="../../imges/1368_smallPic_60.png" /></div>
						<div class="data">
							<div class="data_title">飞来的伤心梅</div>
							<div class="deadline">任务截止:<span>2017-07-10</span></div>
							<div class="release">发布者:<span class="release_name">李老师</span></div>
						</div>
						<div class="msg_btn">
							<div class="goread">去朗读</div>
						</div>
					</div>-->
				</div>
			</div>
		</div>

		<div class="emptys">
			<iframe src="kong3.html" class="empty"></iframe>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			var teacherreads = new Vue({
				el: '.main',
				data: {
					list: []
				}
			})
			var temp = 1
			window.onload = function() {
				$(".empty").height($(window).height())
			}
$("body").show()
			function pullupRefresh() {
				common.ajax("student/reading/queryHomework", {
					uid: common.uid,
					token: common.token,
					page: temp++,
					pageSize: 8
				}, function(data) {
					
					if(!data.data.hasNextPage) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
					}

					if(data.data.list.length == 0) {
						$(".empty").css("display", "block")
						$("#pullrefresh").css("display", "none")
					}else{
						$(".empty").css("display", "none")
						$("#pullrefresh").css("display", "block")
					}

					for(var i = 0; i < data.data.list.length; i++) {
						teacherreads.list.push(data.data.list[i])
					}
					/*console.log(data)
					teacherreads.list = data.data.list*/
				}, "get")
			}
			if(mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pullupLoading();
					}, 300);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pullupLoading();
				});
			}

			$(document).on("tap", ".goread", function() {
				var obj = {
					"caseuid": $(this).parents(".message").attr("caseuid"),
					"plancaseuid": $(this).parents(".message").attr("plancaseuid")
				}
				common.open("play.html", "play.html", obj)
			})
			//			$(this).on("tap",'.msg_btn',function(){
			//				common.open('../langdu/playpage.html')
			//			})
			window.addEventListener('teacherreads', function(e) { //执行刷新
				location.reload();
			});
			$(document).on("tap", ".see", function() {
				var obj = {
					"caseuid": $(this).parents(".message").attr("caseuid"),
					"plancaseuid": $(this).parents(".message").attr("plancaseuid"),
					"readingrecorduid": $(this).parents(".message").attr("readingrecorduid")
				}
				common.open("readdetails.html", "readdetails.html", obj)
			})
		</script>
	</body>

</html>